#Achievement {
  width: 100vw;
  height: 100vh;
  background-color: black;
  overflow-x: hidden;
}

#achieve-scroll-container {
  height: 60vh;
  /* adjust as needed */
  width: 40vw;
  overflow: hidden;
}

#achieve-scroll-images {
  display: flex;
  width: max-content;
  animation: scroll-left 8s linear infinite;
}

#achieve-scroll-images img {
  width: 40vw;
  height: 600px;
  object-fit: cover;
  flex-shrink: 0;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-45vw);
    /* 4 original images x 100vw */
  }
}

.achieve-box {
  margin-top: 4%;
  margin-bottom: 2%;
  width: 100vw;
  height: 60vh;
  display: flex;
  flex-direction: row;
}

#achieve_img {
  width: 600px;
  height: auto;
  margin-bottom: 2%;
}

.achieve-para {
  background-color: black;
  color: white;
  border-radius: 10px;
  padding: 1%;
  margin: auto;
  width: 40vw;
  height: 40vh;
  border: 1px solid white;
  transition: 1s;
  box-shadow: 0 0 20px rgba(253, 240, 240, 0.5);
}

.achieve-para:hover {
   background-color: wheat;
  color: black;
  cursor: pointer;
  transition: 1s;
}

h2 {
  font-weight: 800;
}

@media (max-width: 700px) {
  #achieve-scroll-container {
    width: 100vw;
  }

  #achieve-scroll-images img {
    width: 100vw;
  }

  @keyframes scroll-left {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-105vw);
      /* 4 original images x 100vw */
    }
  }

  .achieve-box {
    height: 100vh;
    display: flex;
    flex-direction: column;

  }

  .achieve-para {
    box-shadow: 0 0 0;
  }

  .achieve-para {
    color: black;
    width: 88vw;
    margin-top: 4%;
     background-color: wheat;
  }

}